<template>
    <transition name="van-slide-right">
        <div class="search-wrapper"> 
            <van-search
                v-model="keyword"
                shape="round"
                background="#d43c33"
                placeholder="请输入搜索关键词"
                show-action
                @clear="clearKeyword"
                clearable>
                <div class="cancel" @click="back" slot="action" >
                    取消
                </div>
            </van-search>
            <div class="content-wrapper">
                <h3 class="search-title">热门搜索</h3>
                <div class="hot-list">
                    <van-skeleton :row="3" :loading="loadingHot">
                        <van-tag @click="handleTag(item)" class="tags" v-for="item in hotList" round color="#eee" :key="item.first" text-color="#999">
                            {{item.first}}
                        </van-tag>
                    </van-skeleton>
                </div>
                <h3 class="search-title local-search" v-if="historyList.length">
                    <p>最近搜索</p>
                    <p @click="clearSearchHistory"><van-icon class="delete-icon" name="delete" /></p>
                </h3>
                <div class="hot-list" v-if="historyList.length">
                    <van-skeleton :row="3" :loading="loadingHot">
                        <van-tag @click="handleTag(item)" class="tags" v-for="(item,index) in historyList" round color="#eee" :key="index" text-color="#999">
                            {{item}}
                        </van-tag>
                    </van-skeleton>
                </div>
            </div>
            <div class="result-list" refs="list" v-if="result.length">
                <van-list
                    v-model="loading"
                    :finished="finished"
                    finished-text="没有更多了"
                    @load="loadMore"
                >
                    <ul class="song-list">
                        <li v-for="(item,index) in result" :key="index" @click="getSong(item,index)" class="item-song van-hairline--bottom">
                            <div class="index">{{index + 1}}</div>
                            <div class="song-info">
                                <p class="song-name van-ellipsis">{{item.name}}</p>
                                <p class="singer-name">{{item.artists[0].name}}</p>
                            </div>
                        </li>
                    </ul>
                </van-list>
            </div>
        </div>
    </transition>
</template>

<script>
import goodStorage from 'good-storage'
import { saveSearch } from 'common/js/cache'
import { debounce } from 'common/js/util'
import { getHotSearch, getSearchResult } from 'api/api'
import { Dialog, Search, Icon, Tag, Skeleton, List, Cell, Toast  } from 'vant'
import { mapMutations, mapActions, mapGetters} from 'vuex'
import { playerMixin } from 'common/js/mixin'
import Scroll from 'components/scroll/scroll'
export default {
    name:'',
    mixins: [playerMixin],
    data(){
        return {
            loading: false,
            finished: false,
            result: [],
            hotList: [],
            keyword: '',
            page: 0,
            loadingHot: true,
            bgSize: 0,
            historyList: []
        }
    },
    created() {
        this.$watch('keyword',debounce(()=> {
            this.handleSearch()
        },200))
    },
    activated() {
        this.getHistorySearch()
    },
    mounted() {
        this._getHotSearch() 
    },
    methods: {
        handleTag(tag) {
            this.keyword = tag.first
            this.handleSearch()
        },
        _getHotSearch(){
            getHotSearch().then(res=> {
                this.hotList = res.result.hots
                this.loadingHot = false
            })
        },
        getHistorySearch() {
            this.historyList = goodStorage.get('_search_') || []
        },
        _getSearchResult(){
            let params = {
                keywords:this.keyword,
                type: 1,
                offset: this.page * 30
            }
            if(!this.keyword){
                return
            }
            this.loading = true
            getSearchResult(params).then(res=> {
                this.result = this.result.concat(res.result.songs) 
                this.loading = false
                saveSearch(this.keyword)
                if(res.result.songs.length < 30){
                    this.finished = true
                }
            })
        },
        handleSearch(){
            this.page = 0
            this.result = []
            this._getSearchResult()
        },
        loadMore(){
            ++this.page
            this._getSearchResult()
        },
        clearKeyword() {
            this.result = []
        },
        clearSearchHistory(){
            Dialog.confirm({
                title: '提示',
                message: '确定删除历史搜索记录吗？'
            }).then(() => {
                goodStorage.remove('_search_')
                this.getHistorySearch()
                Toast.success('删除成功');
            }).catch(() => {
            
            });
        },
        back() {
            if(this.result.length){
                this.result = []
                this.keyword = ''
                return
            }
            this.$router.back()
        },
        getSong(item,index) {
            let id = item.id
            let list = this.song(this.result) 
            this.setPlaylist({id,index,list})
            this.getSongSource()
        },
        song(list) {
            return list.map(item=> {
                item.ar = item.artists
                item.al = {
                    picUrl: item.artists[0].img1v1Url
                }
                return item
            })
        },
        handlePlaylist(list) {
            if(list.length) {
                this.$refs.list.style.bottom = `60px`
            }else{
                this.$refs.list.style.bottom = `0px`
            }
        },
        ...mapActions({
            setPlaylist: 'getCurrentSong',
            getSongSource: 'getSongSource'
        })
    },
    components: {
        Scroll,
        [Tag.name]: Tag,    
        [Icon.name]: Icon,
        [List.name]: List,
        [Cell.name]: Cell,
        [Toast .name]: Toast,
        [Search.name]: Search,
        [Skeleton.name]: Skeleton,
    }
}
</script>

<style scoped lang="less"> 
    .search-wrapper{
        z-index: 2;
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        background: #fff;
        .van-search__action:active{
            background-color: #d43c33;
        }
        .cancel{
            color: #fff;
        }
        .content-wrapper{
            padding:0 10px;
            .search-title{
                margin: 15px 0 10px 0;
                padding-left: 10px;
                color: #333;
                height: 20px;
                line-height: 20px;
                font-size: 16px;
                border-left: 3px solid #d43c33;
                &.local-search{
                    display: flex;
                    justify-content: space-between;
                }
                .delete-icon{
                    font-size: 18px;
                }
            }
            .tags{
                padding: 5px 8px;
                margin: 0 10px 8px 0
            }
        }
        .result-list{
            overflow-y: scroll;
            position: fixed;
            top: 54px;
            left: 0;
            bottom: 0;
            right: 0;
            background: #fff;   
            .song-list{
                padding: 0 20px;
                .item-song{
                    overflow: hidden;
                    display: flex;
                    align-items: center;
                    padding: 10px 0;
                    .index{
                        width: 30px;
                        flex: 0 0 30px;
                        text-align: center;
                    }
                    .song-info{
                        flex: 1;
                        overflow: hidden;
                        margin-left: 10px;
                        .song-name{
                            width: 100%;
                            font-size: 16px;
                        }
                        .singer-name{
                            margin-top: 5px;
                            font-size: 12px;
                            color: #999;
                        }
                    }
                }
            }
        }

    }

</style>
